<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="sassCom.css">
    <style type="text/css">
        #con{height:100%;width:100%;background:skyblue; font-size:16px;color:#333;}
        .emptyBar{height:100px;width:100%;}
        .info-box{border-bottom:2px dashed #888; padding-bottom:20px;}
        .infoBox{display:inline-block;padding:5px 10px; box-sizing:border-box;  min-height:50px;line-height:40px; }
        .infoBox .info-value{display:inline-block;line-height:36px; padding:2px 5px; font-size:16px; border:1px solid #999;}
        .infoBox select{width:140px;height:30px; }
        .infoBox4{ width:70%; height:70px;line-height:60px;}
        .infoBox4 .info-name{vertical-align: middle;}
        .infoBox4 textarea{resize:none; height:58px; width:calc(100% - 150px);vertical-align: middle;border:1px solid #999;}
        .doBtn{display:inline-block; padding:5px;line-height:30px;width:50px;text-align:center;background:#508cee;border-radius:4px;color:#fff;font-size:18px;cursor:pointer}
        .doBtn:hover{background:green;}
        .doBtn:active{background:skyblue;}
        .infoBox .doBtn:nth-child(2){ margin:0 20px; }
        
        .infoLists{padding:20px 10px;max-height:600px;background:#fff;text-align:center;overflow-y:scroll; }
        #listTbale{border-collapse: collapse; margin:0 auto;}
        td{border:1px solid #999;  padding:10px 20px; vertical-align: middle; text-align:center;}
        .bgColor{ background:skyblue;color:#fff;  }
    </style>
</head>
<body>
    
    <div class="con" id="con">
        <p class="emptyBar"></p>
        <div class="info-box">
            <label for="bus" class="infoBox">
                <span class="info-name">businessType</span>:
                <select name="" id="bus" v-model="businessType" @change="typeChange">
                    <option value="0" disabled >请选择短信类型</option>
                    <template v-for="item in businessTypeData">
                        <option :value="item.code" v-text="item.name"></option>
                    </template>
                </select>
            </label>
            <label class="infoBox" for="id">
                <span class="info-name">tempId</span>:
                <input id="id" class="info-value" type="text" v-model="tempId">
            </label>
            <label class="infoBox" for="tel">
                <span class="info-name">templCode</span>:
                <input id="tel" class="info-value" type="text" v-model="templCode">
            </label>
            <label for="atTime" class="infoBox">
                <span class="info-name">atTime</span>:
                <input id="atTime" class="info-value" type="text" v-model="atTime">
            </label>
            <label for="content" class="infoBox infoBox4">
                <span class="info-name">content</span>:
                <textarea  name="" id="content" v-model="content"></textarea>
            </label>
            <button id="addBtn" class="doBtn" type="button" @click="addInfo">添加</button>
            <button id="deleteBtn" class="doBtn"  type="button" @click="changeInfo">修改</button>
            <button id="saveBtn" class="doBtn"  type="button" @click="saveInfo">保存</button>
        </div>
        <div class="infoLists">
            <table id="listTbale" cellpadding="0" cellspacing="0">
                <tr>
                    <td>序号</td>
                    <td>businessType</td>
                    <td>templCode</td>
                    <td>atTime</td>
                    <td>content</td>
                </tr>
                <template v-for="(item , index) in mountedData">
                    <tr :class="[tempId === item.id ? 'bgColor':'']" @click="chooseTr(item , index)">
                        <td v-text="item.id"></td>
                        <td v-text="item.con.businessType"></td>
                        <td v-text="item.con.templCode"></td>
                        <td v-text="item.con.atTime"></td>
                        <td v-text="item.con.content"></td>
                    </tr>
                </template>
                <!-- <tr class="bgColor">
                    <td>01</td>
                    <td>yz</td>
                    <td>mmqbyzXJDxjd11040</td>
                    <td></td>
                    <td>尊敬的{0}，您的贷款申请已通过初审，额度{1}元，请尽快登录“佰仟分期购”微信公众号或“佰仟买买钱包”APP完成贷款确认，贷款资金将于终审通过后一个工作日内发放至您的银行账户，请注意查收！</td>
                </tr> -->
            </table>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">

        var getList = {
                        "1": {
                        "businessType": "yz",
                        "templCode": "mmqbyzXJDxjd11040",
                        "paramsBody": {
                        "value0": ""
                        },
                        "atTime": "",
                        "content": "尊敬的客户，您的验证码为：{0}（有效期20分钟）"
                        },
                        "2": {
                        "businessType": "tz",
                        "templCode": "bqjryzXJDxjd79201",
                        "paramsBody": {
                        "value0": ""
                        },
                        "atTime": "",
                        "content": "尊敬的{0}，您的个人消费分期申请暂时被取消，请登录微信重新申请，详询热线：4009987101"
                        },
                        "3": {
                        "businessType": "tz",
                        "templCode": "bqjrtzXJDxjd08480",
                        "paramsBody": {
                        "value0": ""
                        },
                        "atTime": "",
                        "content": "尊敬的{0}，很遗憾您未通过本次分期申请，感谢您选择我司的服务。请保持良好的信用记录，以便我们再次邀请您办理分期业务。祝您生活愉快！"
                        },
                        "4": {
                        "businessType": "tz",
                        "templCode": "bqjrtzXJDxjd00704",
                        "paramsBody": {
                        "value0": ""
                        },
                        "atTime": "",
                        "content": "尊敬的{0}，您的贷款申请已通过初审，额度{1}元，请尽快登录“佰仟分期购”微信公众号或“佰仟买买钱包”APP完成贷款确认，贷款资金将于终审通过后一个工作日内发放至您的银行账户，请注意查收！"
                        },
                        "5": {
                        "businessType": "tz",
                        "templCode": "",
                        "paramsBody": {
                        "value0": ""
                        },
                        "atTime": "",
                        "content": "尊敬的{0}，您有一笔{1}元的个人消费分期贷款尚未确认，请打开佰仟分期购微信、或登陆佰仟买买钱包APP确认提交，审批通过后2个工作日内到账。"
                        },
                        "6": {
                        "businessType": "yz",
                        "templCode": "bqjryzXJDxjd26784",
                        "paramsBody": {
                        "value0": ""
                        },
                        "atTime": "",
                        "content": "尊敬的客户，您的合同确认码为：{0}（有效期10分钟）"
                        },
                        "7": {
                        "businessType": "tz",
                        "templCode": "bqjrtzXJDxjd93408",
                        "paramsBody": {
                        "value0": ""
                        },
                        "atTime": "",
                        "content": "尊敬的{0}，很遗憾您的综合评分不足，本次终审未通过。感谢您选择我司的服务。请保持良好的信用记录，以便我们再次邀请您办理分期业务。祝您生活愉快！"
                        },
                        "8": {
                        "businessType": "tz",
                        "templCode": "",
                        "paramsBody": {
                        "value0": ""
                        },
                        "atTime": "",
                        "content": "尊敬的客户{0}：抱歉，您的合同已被撤销，如有需要请重新申请（合同审批通过后24小时内未签署将被撤销，如被撤销三次以上，请等待下次邀约）。"
                        },
                        "9": {
                        "businessType": "tz",
                        "templCode": "bqjrtzXJDxjd74976",
                        "paramsBody": {
                        "value0": "",
                        "value1": ""
                        },
                        "atTime": "",
                        "content": "尊敬的{0}先生\/女士您的个人消费分期合同因{1}被暂时取消，请登录微信重新申请，详询热线：4009987101。"
                        },
                        "10": {
                        "businessType": "tz",
                        "templCode": "bqjrtzXJDxjd63136",
                        "paramsBody": {
                        "value0": "",
                        "value1": ""
                        },
                        "atTime": "",
                        "content": "您的个人消费分期申请还未提交，最高{0}期，最多可申请{1}元，请打开佰仟乐购微信、或登陆佰仟买买钱包APP完成申请，审批通过后2个工作日内到账。"
                        },
                        "11": {
                        "businessType": "tz",
                        "templCode": "bqjrtzXJDxjd50880",
                        "paramsBody": {
                        "value0": ""
                        },
                        "atTime": "",
                        "content": "您的个人消费分期申请被取消，请打开佰仟乐购微信、或登陆佰仟买买钱包APP重新申请，最高{0}期，最多可申请{1}元，审批通过后{2}个工作日内到账(如已办理，请勿理会)。"
                        },
                        "12": {
                        "businessType": "tz",
                        "templCode": "bqjrtzXJDxjd19584",
                        "paramsBody": {
                        "value0": ""
                        },
                        "atTime": "",
                        "content": "尊敬的{0}先生\/女士非常抱歉！您未通过本次个人消费分期申请，感谢您选择我司服务。请继续保持良好的还款记录，以便我们再次邀请您办理现金贷款。"
                        },
                        "13": {
                        "businessType": "tz",
                        "templCode": "bqjrtzXJDxjd77088",
                        "paramsBody": {
                        "value0": ""
                        },
                        "atTime": "",
                        "content": "尊敬的客户{0}，您已通过本次审核，请进入佰仟乐购微信或佰仟买买钱包签署协议，签署成功后，当日放款。如当日22：00之前未签署，合同将被撤销，如有需要请再次申请。详询4009987101。"
                        },
                        "14": {
                        "businessType": "tz",
                        "templCode": "bqjrtzXJDxjd21824",
                        "paramsBody": {
                        "value0": ""
                        },
                        "atTime": "",
                        "content": "尊敬的{0}，您的个人消费分期款合同已撤销，请打开佰仟买买钱包APP点击重新申请（如撤销三次以上，请等待下次邀约）。"
                        }
                    }
        
        var listData = [] , keys = Object.keys(getList) , values = Object.values(getList);
        keys.forEach(function(value , index){
            var obj = {};
            obj.id = value;
            obj.con = values[index];
            listData.push(obj); 
        });
        console.log(listData);
        var vm = new Vue({
            el : "#con",
            data : {
                listData : listData,
                businessTypeData : [
                    {"code" : "tz" , "name" : "通知类型"},
                    {"code" : "yz" , "name" : "验证类型"},
                    {"code" : "yy" , "name" : "语音类型"}
                ],
                businessType: 0,   // 短信类型
                tempId : "",      //  短信模板ID
                templCode : "",   // 模板编码
                atTime : "",      // 
                content :  "",    // 模板内容
                checkInfo : null,  // 选中的模板
                checkedIndex : null, 
                isChecked : false,  // 是否被选中
                seprateData : [], 
                mountedData : [],   // 要展示的某个类型的模板
                mountedIndex : "",
                isChanged : false   
            },
            mounted : function(){
                for(var i=0;i<this.businessTypeData.length;i++){
                    var testArr = []; console.log(this.businessTypeData[i].code);
                    for(var j=0;j<this.listData.length;j++){
                        if(this.businessTypeData[i].code === this.listData[j].con.businessType){
                            testArr.push(this.listData[j]);
                        }
                    }
                    this.seprateData.push(testArr);
                }
                // console.log(this.seprateData);
            },
            methods : {
                typeChange : function(){
                    console.log(this.businessType);
                    for(var i=0;i<this.seprateData.length;i++){
                        console.log(this.seprateData[0][0]);
                        if(this.seprateData[i].length > 0 && this.businessType === this.seprateData[i][0].con.businessType){
                            this.mountedData = this.seprateData[i];
                            this.mountedIndex = i;
                            break;
                        } else {
                            this.mountedData = [];
                            this.mountedIndex = i;
                        }
                    }
                },
                chooseTr : function(item , index){
                    if(this.isChecked){
                        if(index !== this.checkedIndex){
                            this.tempId = item.id;
                            this.templCode = item.con.templCode;
                            this.atTime = item.con.atTime;
                            this.content = item.con.content;
                            this.checkInfo = item;
                            this.checkedIndex = index;
                        } else {
                            this.tempId = "";
                            this.templCode = "";
                            this.atTime = "";
                            this.content = "";
                            this.checkInfo = null;
                            this.isChecked = false;
                            this.checkedIndex = "";
                        }
                    } else {
                        this.tempId = item.id;
                        this.templCode = item.con.templCode;
                        this.atTime = item.con.atTime;
                        this.content = item.con.content;
                        this.checkInfo = item;
                        this.checkedIndex = index;
                        this.isChecked = true;
                    }
                },
                addInfo : function(){
                    if(this.checkedIndex){
                        alert("请先取消选择！"); 
                        return ;   
                    }
                    if(this.tempId === "" || this.templCode === "" || this.atTime === "" || this.content === ""){
                        alert("信息不完善！");
                        return ;
                    }
                    var checkId = this.mountedData.every(function(value , index){
                        return value.id !== this.tempId;
                    });
                    var checkCode = this.mountedData.every(function(value , index){
                        return value.con.templCode !== this.templCode;
                    });
                    if(!checkId){
                        alert("短信ID 重复！");
                        return ;
                    }
                    if(!checkCode){
                        alert("templCode重复！");
                        return ;
                    }
                    var obj = {id : "" , con : {}};
                    obj.id = this.tempId;obj.con.templCode = this.templCode; obj.con.atTime = this.atTime ; obj.con.content = this.content;
                    this.mountedData.push(obj);
                    this.seprateData.splice(this.mountedIndex , 1 , this.mountedData);
                    this.isChanged = true;
                },
                changeInfo : function(){
                    if(!this.checkInfo){
                        alert("请选择要修改的项目！");
                        return ;
                    }
                    if(this.templCode === this.checkInfo.con.templCode && this.atTime === this.checkInfo.con.atTime && this.content === this.checkInfo.con.content){
                        alert("暂无修改！");
                        return ;
                    }
                    this.checkInfo.id = this.tempId;
                    this.checkInfo.con.templCode = this.templCode;
                    this.checkInfo.con.atTime = this.atTime;
                    this.checkInfo.con.content = this.content;
                    this.mountedData.splice(this.checkedIndex , 1 , this.checkInfo);
                    this.seprateData.splice(this.mountedIndex , 1 , this.mountedData);
                    this.isChanged = true;
                },
                saveInfo : function(){
                    if(this.isChanged){
                        var resultArr = [];
                        for(var i=0; i < this.seprateData.length;i++){
                            resultArr = resultArr.concat(this.seprateData[i]);
                        }
                        console.log(resultArr);
                        // 保存...
                    } else {
                        alert("暂无改动！");
                    }
                }
            }
        })
    </script>
</body>
</html>